<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人-家</title>
  <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4672185_amcdq2cg9z7.css">
  <script src="./js/echarts.min.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/history.js"></script>
</head>

<body>
  <div class="main">
    <div class="nav">
      <span class="logo iconfont icon-zhinengshouhuan"></span>
      <div class="time">
        <span class="iconfont icon-icon"></span>
        <b>xxxx年xx月xx日 xx:xx:xx</b>
      </div>
      <div class="weather">
        天气状况：<b>晴</b>&nbsp;&nbsp;
        <span class="iconfont icon-wendu1 tem"></span><b>30℃</b>
        &nbsp;&nbsp;
        <span class="iconfont icon-shidu hum"></span> <b>50%</b>
      </div>
      <div class="user">
        <span class="iconfont icon-yonghu"></span>
        &nbsp;&nbsp;欢迎，admin
      </div>
    </div>
    <div class="content">
      <!-- 数据显示 -->
      <div class="show">
        <div class="huanj">
          <h3>室内温湿度</h3>
          <div>
            <span class="iconfont icon-wendu tem"></span> 室内温度&nbsp;<b>30℃</b>
          </div>
          <div>
            <span class="iconfont icon-shidu1 hum"></span> 室内湿度&nbsp;<b>30%</b>
          </div>
        </div>
        <div class="tiwen">
          <h3>体温</h3>
          <div>
            <span class="iconfont icon-thermometer tem"></span> 体温&nbsp;&nbsp;<b>30℃</b>
          </div>
        </div>
        <div class="rate">
          <h3>心率</h3>
          <div>
            <span class="iconfont icon-xinshuai tem"></span> 心率&nbsp;&nbsp;<b>30℃</b>
          </div>
        </div>
        <div class="step">
          <h3>今日步数</h3>
          <div>
            <span class="iconfont icon-bushu"></span> 今日步数&nbsp;<b>30℃</b>
          </div>
        </div>
      </div>
      <!-- 监控 -->
      <div class="video iconfont icon-jiankong">
        <img src="http://192.168.50.7:8080/?action=stream">
      </div>
      <!-- 控制设备 -->
      <div class="control">
        <!-- 灯光 -->
        <div class="light">
          <div class="left">
            <h3>灯光</h3>
            <span class="deng">OFF</span>
          </div>
          <div class="middle iconfont icon-guandeng-light-off"></div>
          <div class="right">
            <button type="button">ON</button>
          </div>
        </div>
        <!-- 除湿器 -->
        <div class="fan">
          <div class="left">
            <h3>除湿器</h3>
            <span class="csq">ON</span>
          </div>
          <div class="middle iconfont icon-fengshankai"></div>
          <div class="right">
            <!-- <div>
              <a class="iconfont icon-xiaofeng"></a>
              <a class="iconfont icon-zhongfeng"></a>
              <a class="iconfont icon-zu73"></a>
            </div> -->
            <!-- <ul>
              <li><a href="javascript:;" class="iconfont icon-xiaofeng"></a></li>
              <li><a href="javascript:;" class="iconfont icon-zhongfeng"></a></li>
              <li><a href="javascript:;" class="iconfont icon-zu73"></a></li>
            </ul> -->
            <button type="button">OFF</button>
          </div>
        </div>
        <!-- 空调 -->
        <div class="air">
          <div class="left">
            <h3>空调</h3>
            <span class="kt">OFF</span>
          </div>
          <div class="middle iconfont icon-yidongduan-"></div>
          <div class="right">
            <button type="button">ON</button>
          </div>
        </div>
      </div>
      <!-- 历史记录 -->
      <div class="history">
        <div id="main" style="width: 600px;height:400px;"></div>
      </div>
    </div>
  </div>

</body>

</html>